<template>
	<view class="u-padding-top-30">
		<view class="list mdx-center-min u-flex" v-for="(row,index) in list" :key='index'>
			<view>
				<u-avatar :src="row.team_img" size="100" mode='square'></u-avatar>
			</view>
			<view class="u-flex-1 u-m-l-20">
				<view class="name">{{row.team_name}}</view>
				<view class="number"> 团队人数：{{row.team_unm}}</view>
			</view>
			<view class="btmn" @click="allBtn(row)">申请入团</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				pageSize: 10,
				list: []
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			getList() {
				this.$http.get('/api/Team/teamlist', {
					page: this.page,
					limit: this.pageSize
				}).then(res => {
					if (res.code == 0) {
						res.data.forEach(e => {
							this.list.push(e)
						})
					}
				})
			},
			allBtn(item) {
				uni.showModal({
					content: "是否确认加入该团队",
					success: (e) => {
						if (e.confirm) {
							this.$http.post('/api/Team/addteaminfo', {
								id: item.id,
								tz_id: item.t_uid
							}).then(res => {
								if (res.code == 0) {
									this.$refs.uToast.show({
										title: res.msg,
										type: 'success',
									})
								} else {
									this.$refs.uToast.show({
										title: res.msg,
										type: 'error',
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FAFAFA;
	}

	.list {
		padding: 20rpx;
		background-color: #FFf;
		box-shadow: 0 0 10rpx #E2E2E2;
		border-radius: 10rpx;
		margin-bottom: 20rpx;

		.name {
			font-size: 32rpx;
			font-weight: 550;
		}

		.number {
			margin-top: 15rpx;
			font-size: 26rpx;
			color: #999999;
		}

		.btmn {
			padding: 15rpx 25rpx;
			background-color: #FFEC3E;
			border-radius: 10rpx;
			font-size: 30rpx;
		}
	}
</style>
